/*
 * @Title: 娱乐详情
 * @Created by: ycq
 */
<template>
	<view :class="showColl||showChooseType||showFx||showRoom||showDetail?'hotel':''">
		<!-- 头部 -->
		<view class="hotel-body" >
			<comHeader :config="navConfig"/>
			<view class="header">
				<image class="header-bg" src="/static/banner.png" mode=""></image>
				<view class="play" @click="toRoomPos"></view>
				<view class="p-num" @click="play">
					<image src="/static/tupian.png" mode="aspectFit"></image>
					<text>10</text>
				</view>
				<view class="p-num" style="top: 170upx;">
					<image class="VR-img" src="/static/360VR.png" mode="aspectFit"></image>
				</view>
				<view class="header-bottom">
				</view>
			</view>
			
			<view class="hotel-info">
				<text class="name">逃出黑白密室逃脱</text>
				<text class="fenshu">4.6分</text>
				<view class="hotel-info-btn">
					<image v-if="!isFenxiang" src="/static/fenxiang.png" @click="togglePopup('bottom','share')" mode=""></image>
					<image v-if="isFenxiang" src="/static/fenxiang-1.png" @click="togglePopup('bottom','share')" mode=""></image>
					<image v-if="!isShoucang" @click="coll()" src="/static/shoucang.png" mode=""></image>
					<image v-if="isShoucang" src="/static/shoucang-1.png" mode=""></image>
					<image v-if="!isAdd" src="/static/add.png" mode="" @click="addXcType()"></image>
					<image v-if="isAdd" src="/static/add-1.png" mode="" @click="addXcType()"></image>
					<image class="xingcheng" src="/static/xingcheng.png" mode="" @click="addXcType()"></image>
				</view>
				<view style="width: 100%;height: 200upx;">
					<view class="address">
						<view class="address-info">
							<image src="/static/pos-blue.png" mode=""></image>
							<text class="city">大连庄河市仙人洞镇北部</text>
							<text class="way">乘坐198支线到仙人洞镇，步行650米</text>
							<text class="pl-num">1562条热门评论</text>
						</view>
					</view>
					<view class="begin">开始导航</view>
				</view>
				
				<view class="list-title">
						<text class='shu'></text>
						<text>营业时间</text>
					<image src="/static/ydphone.png"></image>
				</view>
				<view class="yy-item">
					<text class="yy-state">营业中</text>
					<text class="yy-time">10:00-22:00</text>
					
				</view>
				<!-- 类型 -->
				<view class="yy-tip">
					<view class="yy-tip-item">
						恐怖密室
					</view>
					<view class="yy-tip-item">
						真人NPC
					</view>
					<view class="yy-tip-item">
						烧脑
					</view>
					<view class="yy-tip-item">
						桌游
					</view>
				</view>
				<!-- 预定座位/排队取号 -->
				<view class="line">
					<view>
						<image src="/static/chair.png"></image>
						<text>预定座位</text>
					</view>
					<view>
						<image src="/static/linequhao.png"></image>
						<text>排队取号</text>
					</view>
				</view>
				<!-- 预定座位 留着有用-->
				<!-- <view class="line lineOne">
					<view>
						<image src="/static/chair.png"></image>
						<text>预定座位</text>
					</view>
					<view>
						<uni-icon type="arrowright" size="20" color="#A7A7A7"></uni-icon>
					</view>
				</view> -->
				<!-- 排队取号 留着有用-->
				<!-- <view class="line lineOne">
					<view>
						<image src="/static/linequhao.png"></image>
						<text>排队取号</text>
					</view>
					<view class="lineYY">
						<text>预约</text>
						<uni-icon type="arrowright" size="20" color="#A7A7A7"></uni-icon>
					</view>
				</view> -->
			</view>
			<!-- 主题预订 -->
			<view class="hotel-info">
				<view class="list-title">
					<text class='shu'></text>
					<text>主题预订</text>
				</view>
				<view>
					<view class="room-item" v-for="(item,index) in roomData"  :key='index'>
						<image :src="item.img" @click="showPlayDetail"></image>
						<view class="item-right">
							<view class="item-title" @click="showPlayDetail">
								<text class="title-text">{{item.name}}</text>
								<view class="titFr">
									<text>详情</text>|
									<text>购买须知</text>
									<image src="/static/jiantou.png" mode=""></image>
								</view>
							</view>
							
							<view class="hd-list" >
									<text>{{item.pro}}</text>
							</view>
							<view class="hd-list" >
									<text>{{item.time}}</text>
							</view>
							<view class="botm-price">
								<text class="price">￥{{item.prize}}/人</text>
								<!-- <text class="oldPrice">￥{{item.oldPrize}}</text> -->
								<view class="buy" @click="toOrder">立即预订</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 评论 -->
			<Comment :itemHandle='toEvaluationDetail' :itemHandle2='toEvaluation1'  /> 
			<view class="down-more">
				<image src="/static/d-down.png" mode=""></image>
				<text>下拉查看更多</text>
			</view>
			
			<view style="height: 19vw;"></view>
		</view>
		<Play-detail v-if='showDetail'></Play-detail>
		
		<FootMenu />
		<xing-cheng v-if='showXc'/>
		<!-- <Recreation /> -->
		<xingcheng-type v-if='showChooseType' :config='typeConfig'></xingcheng-type>
		<Collection v-if='showColl' />
		<!-- 分享弹窗 -->
		<uni-popup ref="share" :type="type" :custom="true">
			<view class="uni-share">
				<view class="uni-share-title">分享到</view>
				<view class="uni-share-content">
					<view v-for="(item, index) in bottomData" :key="index" class="uni-share-content-box">
						<view class="uni-share-content-image">
							<image :src="item.icon" class="image" />
						</view>
						<view class="uni-share-content-text">{{ item.text }}</view>
					</view>
				</view>
				<view class="uni-share-btn"  @click="cancel('share')">取消分享</view>
			</view>
		</uni-popup>
		<popuper v-if='showPop' ></popuper>
		<top-view></top-view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	import Comment from '@/components/Comment.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import PlayDetail from '@/components/PlayDetail.vue'
	import popuper from '@/components/Popuper.vue'
	export default{
		data(){
			return{
				navConfig:{
					isFixed:false,
					comScroll:200,
					left:{
						text:'',
						isShowLeft:true,
						leftGobackColor:'#ffffff',
						leftTextColor:'',
					},
					mid:{
						isShowMid:false,
						text:''
					},
					right:{
						text:'',
						isShowRight:false,
					}
				},
				typeConfig:{
					typeId:4
				},
				showXc:false,
				toList:false,
				toXq:false,
				type: '',//uniPopup组件类型
				openJJ:false,
				showChooseType:false,
				showColl:false,
				isFenxiang:true,
				isShoucang:false,
				showDetail:false,
				isAdd:false,
				showFx:false,
				roomData:[
					{
						name:'密室逃脱',
						far:5,
						tip:'大床1.8m | 全房间WiFi | 无餐食 | ',
						prize:298,
						oldPrize:198,
						pro:'角色扮演、沉浸体验',
						time:'限时110分钟',
						quxiao:'!有条件取消',
						img:'/static/banner.png',
					},
				{
					name:'密室逃脱',
					far:5,
					tip:'大床1.8m | 全房间WiFi | 无餐食 | ',
					prize:298,
					oldPrize:198,
					pro:'角色扮演、沉浸体验',
					time:'限时110分钟',
					quxiao:'!有条件取消',
					img:'/static/banner.png',
				},
				{
					name:'密室逃脱',
					far:5,
					tip:'大床1.8m | 全房间WiFi | 无餐食 | ',
					prize:298,
					oldPrize:198,
					pro:'角色扮演、沉浸体验',
					time:'限时110分钟',
					quxiao:'!有条件取消',
					img:'/static/banner.png',
				},	
				],
				bottomData: [
					{
						text: '微信',
						icon: '/static/audio/fx-wx.png',
						name: 'wx'
					},
					{
						text: '朋友圈',
						icon: '/static/audio/fx-friend.png',
						name: 'pyq'
					},
					{
						text: 'QQ',
						icon: '/static/audio/fx-qq.png',
						name: 'qq'
					},
					{
						text: 'QQ空间',
						icon: '/static/audio/fx-qqzone.png',
						name: 'qqkj'
					}
					],
					hdData:[
						{
							name:'随时退',
							url:''
						},
						{
							name:'过期退',
							url:''
						}
					],
				
				
				
			}
		},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			play(){
				uni.navigateTo({
					url:'photo'
				})
			},
			showPlayDetail(){
				this.showDetail = true
				document.body.style.overflow = 'hidden'
			},
			closePlayDetail(){
				this.showDetail = false
				document.body.style.overflow = 'scroll'
			},
			togglePopup(type,open){
				this.type = type;
				this.$refs[open].open()
				this.showFx = true
				document.body.style.overflow = 'hidden'
			},
			cancel(type) {
				this.showFx = false
				this.$refs[type].close()
				document.body.style.overflow = 'scroll'
			},
			toOrder(){
				uni.navigateTo({
					url:'/pages/home/Recreation/recreationOrder'
				})
			},
			coll(){
				this.showColl=true
				document.body.style.overflow = 'hidden'
			},
			closeColl(){
				this.showColl=false
				document.body.style.overflow = 'scroll'
			},
			closeXc(){
				this.showXc=false
				document.body.style.overflow = 'scroll'
			},
			addXcType(){
				this.showChooseType=true
				document.body.style.overflow = 'hidden'
			},
			closeXcType(){
				this.showChooseType=false
				document.body.style.overflow = 'scroll'
			},
			toRoomPos(){
				uni.pageScrollTo({
					scrollTop:document.getElementById("div").offsetTop-100,
					duration: 0
				})
			},
			toEvaluation1(){
				uni.navigateTo({
					url:'/pages/common/evaluation'
				})
			},
			toEvaluationDetail(){
				uni.navigateTo({
					url:'/pages/common/evaluationDetail'
				})
			},
			
		},
		components:{
			Comment,
			PlayDetail,
			uniPopup,
			uniIcon,
			popuper
		},
		onLoad(aa){
			this.toList = aa.tolist
			this.showRoom = aa.toxq
		},
		computed: {
			showPop() {
				return this.$store.state.showAddCuss.show
			}
		},
		onReady() {
			if (this.toList) {
				setTimeout(function(){
					uni.pageScrollTo({
						scrollTop:document.getElementById("div").offsetTop-100,
						duration: 0
					})
				}, 500);
			}
			
			
		}
	}
</script>

<style scoped>
	.hotel{
		width: 100%;
		height: 100vh;
		overflow: scroll;
		position: relative;
	}
	.hotel-body{
		position: absolute;
		width: 100%;
		height: 100vh;
		}
	.header{
		width: 750upx;
		height: 575upx;
		position: relative;
	}
	.header-bg{
		width: 750upx;
		height: 575upx;
		position: absolute;
	}
	.back{
		width: 60upx;
		height: 60upx;
		top: 60upx;
		left: 26upx;
		position: absolute;
	}
	.back image{
		width: 30upx;
		height: 36upx;
	}
	.play{
		position: absolute;
		top:295upx;
		left:342upx;
		width:0;
		height:0;
		border-top:35.5upx solid transparent;
		border-bottom:35.5upx solid transparent;
		border-left:63upx solid #FFFFFF;
	}
	.p-num{
		width: 125upx;
		height: 48upx;
		top: 103upx;
		right: 0;
		position: absolute;
		background: rgba(0,0,0,0.5);
		border-radius: 30upx 0 0 30upx;
		position: absolute;
	}
	.p-num image{
		width: 26upx;
		height: 26upx;
		margin-left:36upx;
		margin-top: 12upx;
		float: left;
	}
	.VR-img{
		width: 92upx !important;
		height: 32upx !important;
		margin-left:20upx !important;
		margin-top: 8upx !important;
	}
	.p-num text{
		color: #FFFFFF;
		font-size: 24upx;
		line-height: 48upx;
		float: left;
		margin-left: 16upx;
	}
	.header-bottom{
		width: 750upx;
		height: 30upx;
		bottom: 0upx;
		border-radius: 30upx 30upx 0 0;
		background: #FFFFFF;
		position: absolute;
	}
	.hotel-info{
		width:100%;
		height: auto;
		background: #FFFFFF;
		padding-bottom:18upx;
		border-bottom:15upx solid #F6F6F6;
	}
	.hotel-info .name{
		font-size: 36upx;
		margin-left: 37upx;
		height: 30upx;
		float: left;
		font-weight: bold;
		margin-right: 0;
	}
	.hotel-info .stars{
		float: left;
		width: 200upx;
		height: 30upx;
		margin-top: 24upx;
		margin-left: 20upx;
	}
	.hotel-info .stars image{
		width: 22upx;
		float: left;
		margin-left: 10upx;
		height: 20upx;
	}
	.fenshu{
		float: right;
		font-size: 28upx;
		color: rgba(86,147,255,1.00);
		margin-right: 36upx;
		margin-top: 10upx;
	}
	.hotel-info-btn{
		width: 300upx;
		height: 37upx;
		padding-top: 80upx;
		margin-left: 37upx;
		
	}
	.hotel-info-btn image{
		width: 35upx;
		height: 35upx;
		margin-right: 30upx;
		float: left;
	}
	.xingcheng{
		width: 54upx !important;
		height: 28upx !important;
		margin-top: -10upx;
		margin-left: -15upx;
	}
	.hotel-info .address{
		margin-top: 30upx;
		margin-left: 37upx;
		width: 450upx;
		height: auto;
		display: table;
		float: left;
	}
	.address-info{
		width: 450upx;
		height: auto;
		float: left;
	}
	.address-info image{
		float: left;
		width: 26upx;
		margin-top: 10upx;
		height: 30upx;
	}
	.city{
		float: left;
		font-size: 28upx;
		height: 30upx;
		font-weight: bold;
		margin-left: 20upx;
	}
	.hotel-info .way{
		width: 450upx;
		display: block;
		margin-top: 60upx;
		font-size: 24upx;
		margin-bottom:20upx;
		color: #888888;
	}
	.hotel-info .pl-num{
		font-size: 24upx;
		color: #888888;
		margin-left: 40upx;
	}
	.begin{
		width: 202upx;
		height: 60upx;
		background: -webkit-linear-gradient(left, #54B1FF,#5873FF);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B1FF,#5873FF);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B1FF,#5873FF);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B1FF,#5873FF);
		/* 标准的语法 */
		float: right;
		border-radius: 30upx;
		font-size: 30upx;
		border: none;
		margin-top: 40upx;
		line-height: 60upx;
		margin-right: 24upx;
		text-align: center;
		color: #FFFFFF;
	}
	.yy-item{
		width: 100%;
		height: 80upx;
	}
	.yy-state{
		float: left;
		line-height: 80upx;
		margin-left: 58upx;
		font-size: 28upx;
		color: #34C260 ;
	}
	.yy-time{
		float: left;
		line-height: 80upx;
		color: rgba(102,102,102,1.00);
		margin-left: 40upx;
		font-size: 28upx;
	}
	.yy-tip{
		display: flex;
		height: 38upx;
		padding-top: 21upx;
		font-size: 24upx;
		flex-direction: row;
		padding-bottom: 23upx;
		margin:0 auto;
		width: 94%;
		border-bottom:1px solid #EFEFEF;
	}
	.yy-tip-item{
		padding:0 22upx;
		height: 38upx;
		border: rgba(141,184,254,1) solid 1upx;
		border-radius: 2px 2px 2px 2px;
		text-align: center;
		line-height: 38upx;
		color: rgba(86,152,255,1.00);
		margin: 0 10upx;
	}
	.line{
		margin:0 auto;
		width: 94%;
		line-height: 94upx;
		height: 94upx;
		border-bottom:1px solid #EFEFEF;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.line>view{
		width: 50%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.line>view text{
		font-size: 26upx;
		color: 000000;
	}
	.line>view image{
		width:36upx;
		height: 36upx;
		margin-right: 12upx;
	}
	.lineOne{
		justify-content: space-between;
	}
	.lineOne>view{
		width: auto;
	}
	.lineYY{
		font-size: 24upx;
		color: #999999;
	}
	.lineOne .lineYY{
		display: flex;
		flex-direction: row;
		align-items: center;
	}
	.list-title{
		width: 93.4%;
		margin-left: auto;
		margin-right: auto;
		height: 58.4upx;
		margin-top:20upx;
		margin-bottom: 20upx;
		
	}
	
	/* .tit-yyTime > view{
		display: flex;
		flex-direction: row;
		
		align-items: center;
	} */
	.list-title text{
		font-size: 30upx;
	}
	.list-title image{
		margin-right: 10upx;
		width: 43upx;
		height: 45upx;
		float: right;
	}
	.shu{
		width: 0.7%;
		height: 3.06vw;
		background: #55A0FF;
		float: left;
		margin-top: 2.3vw;
		margin-right: 10px;
	}
	.des{
		width: 700upx;
		padding-left: 25upx;
		padding-right: 25upx;
		text-align:justify;
		text-indent:56upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		height: auto;
		font-size: 28upx;
		color: #888888;
	}
	.des-open{
		width: 700upx;
		padding-left: 25upx;
		padding-right: 25upx;
		display: block;
		text-align:justify;
		text-indent:56upx;
		height: auto;
		font-size: 28upx;
		color: #888888;
	}
	.hd{
		width: 700upx;
		padding-left: 25upx;
		padding-right: 25upx;
		height: 42upx;
		margin-top: 30upx;
	}
	.hd image{
		width: 38upx;
		height: 42upx;
		float: left;
	}
	.hd text{
		margin-left: 20upx;
		font-size: 24upx;
		height: 42upx;
		display: block;
		float: left;
		line-height: 42upx;
		font-weight: bold;
	}
	/* 房间预定 */
	.room-list{
		width: 710upx;
		margin-left: auto;
		margin-right: auto;
		margin-top: 80upx;
	}
	.room-item{
		width: 710upx;
		height: 182upx;
		margin-top: 25upx;
		margin-bottom: 30upx;
	}
	.room-item image{
		margin: 10upx  10upx 0upx 10upx;
		width: 239upx;
		height: 172upx;
		float: left;
		border-radius: 10upx;
	}
	
	.item-right{
		position: relative;
		width: 430upx;
		height: 182upx;
		float: right;
	}
	.botm-price{
		width:100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		position: absolute;
		bottom:0
	}
	.item-title{
		width: 100%;
		margin-top: 5upx;
		height: 50upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.titFr{
		display: flex;
		flex-direction: row;
		align-items: center;
		color: #5595FF;
		font-size: 20upx;
	}
	.titFr text{
	padding:5upx;
	}
	.title-text{
		font-size: 32upx;
		float: left;
	}
	
	.item-title image{
		width: 20upx;
		height: 23upx;
		float: right;
		font-size: 21upx;
		color: #666666;
	}
	
	.far{
		width: 100%;
		display: block;
		font-size: 25upx;
		color: #666666;
	}
	.tip{
		width: 100%;
		display: block;
		margin-top: 5upx;
		font-size: 25upx;
		color: #666666;
	}
	.hd-list{
		width: 100%;
		height: 25upx;
		display: flex;
		flex-direction: row;
		margin-top: 10upx;
		color: #999999;
		font-size: 24upx;
	}
	.hd-item{
		width: 119upx;
		height: 30upx;
		border-radius: 20upx;
		margin-right: 15upx;
		color: rgba(51,51,51,1.00);
		text-align: center;
		line-height: 30upx;
		font-size: 20upx;
		display: flex;
		flex-direction: row;
	}
	.hd-item image{
		width: 24upx;
		height: 24upx;
		margin-top: 2upx;
	}
	.price{
		font-size: 32upx;
		color: rgba(221,84,10,1.00);
		/* margin-left: 20upx; */
	}
	.oldPrice{
		font-size: 28upx;
		color: rgba(153,153,153,1.00);
		margin-top: 50upx;
		line-height: 50upx;
		text-decoration:line-through;
		float: left;
		margin-left: 20upx;
		/* margin-left: 20upx; */
	}
	
	.room-item .buy{
		width: 127upx;
		height: 40upx;
		color: #FFFFFF;
		font-size: 22upx;
		text-align: center;
		padding-left: 0;
		padding-right: 0;
		line-height: 40upx;
		border-radius: 20upx;
		border: none;
		white-space: nowrap;  /*强制span不换行*/
		background: -webkit-linear-gradient(left, #54B0FF,#5773FE);
		/* Safari 5.1 - 6.0 */
		background: -o-linear-gradient(right, #54B0FF,#5773FE);
		/* Opera 11.1 - 12.0 */
		background: -moz-linear-gradient(right, #54B0FF,#5773FE);
		/* Firefox 3.6 - 15 */
		background: linear-gradient(to right, #54B0FF,#5773FE);
		/* 标准的语法 */
	}
	.quxiao{
		font-size: 28upx;
		color: #000000;
		margin-top: 20upx;
		float: left;
	}
	/* 热门评论 */
	.down-more{
		width: 750upx;
		height: 30upx;
		text-align: center;
		display: flex;
		flex-direction: row;
		justify-content:center;
		margin-top: 50upx;
	}
	.down-more image{
		width: 24px;
		height: 20px;
		margin-right: 30upx;
		
		/* padding-top: 30upx; */
		
	}
	.down-more text{
		
		font-size: 34upx;
		line-height: 35upx;
		color: #D3D2D2;
	}
	/* 底部分享 */
	.uni-share {
		background: #fff;
	}
	
	.uni-share-title {
		line-height: 60upx;
		font-size: 24upx;
		padding: 15upx 0;
		text-align: center;
	}
	
	.uni-share-content {
		display: flex;
		flex-wrap: wrap;
		padding: 15px;
	}
	
	.uni-share-content-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		box-sizing: border-box;
	}
	
	.uni-share-content-image {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 60upx;
		height: 60upx;
		overflow: hidden;
		border-radius: 10upx;
	}
	
	.uni-share-content-image .image {
		width: 100%;
		height: 100%;
	}
	
	.uni-share-content-text {
		font-size: 26upx;
		color: #333;
		padding-top: 5px;
		padding-bottom: 10px;
	}
	
	.uni-share-btn {
		height: 90upx;
		line-height: 90upx;
		border-top: 1px #f5f5f5 solid;
		text-align: center;
		font-size: 30upx;
		color: #666;
	}
	
	
	.hotel-list{
		width: 710upx;
		margin-left: auto;
		margin-right: auto;
		height: auto;
		margin-bottom: 130upx;
		display: table;
		margin-top: 20upx;
	}
	.hotel-item:nth-child(odd){
		margin-top: 20upx;
		width: 340upx;
		float: left;
	}
	.hotel-item:nth-child(even){
		margin-top: 20upx;
		width: 340upx;
		float: right;
	}
	.hotel-item:nth-child(1),.hotel-item:last-child{
		height: 652upx;
	}
	.hotel-item:nth-child(1) image,.hotel-item:last-child image{
		border-radius: 10px 10px 0 0;
		width: 340upx;
		height: 430upx; 
	}
	.hotel-item:nth-child(1) .item-fen,.hotel-item:last-child .item-fen{
		top: 400upx;
	}
	.hotel-item{
		height: 700upx;
		position: relative;
		/* background: #007AFF; */
	}
	.hotel-item image{
		border-radius: 10px 10px 0 0;
		width: 340upx;
		height: 479upx;
	}
	.hotel-item .item-fen{
		width: 68upx;
		height: 30upx;
		background: rgba(0,0,0,0.5);
		color: #FFFFFF;
		font-size: 24upx;
		position: absolute;
		right: 0;
		text-align: center;
		top: 449upx;
		line-height: 30upx;
	}
	.item-text{
		width: 340upx;
		height: 210upx;
		float: right;
	}

	.title-text{
		font-size: 32upx;
		width: 200upx;
		display: block;
		float: left;
	}
	.stars{
		float: left;
		padding-left: 20upx;
	}
	.sc{
		float: right;
		font-size: 21upx;
		padding-top: 4upx;
		right: 20upx;
		
		position: absolute;
		z-index: 2;
		color: #666666;
	}
	.sc image{
		width: 25upx !important;
		height: 25upx !important;
	}
	.far{
		width: 100%;
		display: block;
		font-size: 25upx;
		width: 300upx;
		padding-left: 20upx;
		color: #666666;
	}
	.address{
		width: 100%;
		display: block;
		margin-top: 5upx;
		font-size: 25upx;
		padding-left: 20upx;
		color: #666666;
	}
	
	.hotel-list .buy{
		width: 100upx;
		height: 60upx;
		margin-top: 15upx;
		color: rgba(84,172,255,1.00);
		font-size: 22upx;
		text-align: center;
		padding-left: 0;
		right: 0;
		bottom: 0upx;
		line-height: 35upx;
		border-radius: 20upx;
		position: absolute;
		white-space: nowrap;  /*强制span不换行*/
		float: right;
	}
	.buy-btn{
		width: 80upx;
		height: 35upx;
		margin-top: 15upx;
		color: rgba(84,172,255,1.00);
		font-size: 22upx;
		text-align: center;
		border: rgba(84,172,255,1.00) solid 1upx;
		line-height: 35upx;
		border-radius: 20upx;
	
	}
	.stars ul{
		float: right;
		padding: 0;
		display: flex;
		flex-direction: row;
		list-style:none;
	}
	.stars ul li{
		width: 25upx;
		height: 25upx;
		margin-top: 10upx;
		background:url(../../../static/dengji.png) no-repeat center;
		background-size: 80%;
	}
</style>
